<script setup>
  import { delDayRcomApi, getDayRcomApi } from '@/api/article'
  import useTable from '@/hooks/useTable'
  import AddDayRecom from './components/AddDayRecom.vue'
  import { ref } from 'vue'

  const { tableData, pager, getData, handleDel, pageChange } = useTable({
    apiFn: getDayRcomApi,
    delApiFn: delDayRcomApi
  })

  const addDayRecomRef = ref(null)
</script>

<template>
  <div class="day-recom-view content">
    <LvList :listData="tableData">
      <template #btns>
        <el-button type="success" @click="addDayRecomRef?.open">上传推荐</el-button>
      </template>
      <template #left="{ row }">
        <div class="cover"><img :src="row.imageUrl" /></div>
        <div class="content">
          <p class="title">{{ row.title }}</p>
          <p>地址：{{ row.address }}</p>
          <p>颜色值：{{ row.color }}</p>
          <p>添加时间：{{ row.time }}</p>
        </div>
      </template>
      <template #right="{ row }">
        <el-button type="danger" @click="handleDel(row._id)">删除</el-button>
      </template>
    </LvList>
    <LvPagination :total="pager.total" :page="pager.page" :size="6" @change="pageChange" />

    <!-- 弹窗组件 -->
    <AddDayRecom ref="addDayRecomRef" @update="getData" />
  </div>
</template>

<style scoped lang="scss">
  .cover {
    width: 90px;
    height: 120px;
    img {
      border-radius: 6px;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .content {
    padding-left: 10px;
    .title {
      font-weight: 700;
      color: #333 !important;
    }
    p {
      color: #0000008c;
      margin: 5px 0;
    }
  }
</style>
